<template>
  <div class="modal">
    <h2>修改密码</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="old-password">原密码</label>
        <input id="old-password" type="password" v-model="oldPassword" @blur="validateOldPassword" placeholder="请输入原密码"/>
        <span v-if="passwordError" class="error">{{ passwordError }}</span>
      </div>
      <div class="form-group">
        <label for="new-password">新密码</label>
        <input id="new-password" type="password" v-model="newPassword" placeholder="请输入新密码"/>
      </div>
      <div class="form-group">
        <label for="confirm-password">确认新密码</label>
        <input id="confirm-password" type="password" v-model="confirmPassword" placeholder="请确认新密码"/>
        <span v-if="confirmPassword && newPassword !== confirmPassword" class="error">密码不一致</span>
      </div>
      <div class="buttons">
        <button type="submit" class="btn-submit">提交</button>
        <button type="button" @click="$emit('close')" class="btn-close">关闭</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      passwordError: null
    };
  },
  methods: {
    validateOldPassword() {
      // 示例代码中假设旧密码是"正确的密码"
      // 实际应用中应通过API调用来验证旧密码的正确性
      this.passwordError = this.oldPassword !== '正确的密码' ? '密码错误' : null;
    },
    submitForm() {
      if (this.passwordError) return;
      if (this.newPassword !== this.confirmPassword) return;

      // 进行密码修改请求的提交
      console.log('旧密码:', this.oldPassword);
      console.log('新密码:', this.newPassword);

      // 通知父组件关闭模态框
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.modal {
  width: 400px;
  margin: 10% auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 15px;
  font-size: 1.5rem;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: calc(100% - 10px);
  padding: 8px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.error {
  color: #ff4d4f;
  font-size: 0.875rem;
  margin-top: 5px;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-submit {
  background-color: #4caf50;
  color: white;
}

.btn-submit:hover {
  background-color: #45a049;
}

.btn-close {
  background-color: #ff4d4f;
  color: white;
}

.btn-close:hover {
  background-color: #ff3333;
}
</style>